<template>
	<view class="login">
		<view class="login-bg"></view>
		
		<view class="cu-card">
		  <view class="cu-items">
			  <!-- 头像 -->
		    <view class="cu-logo">
				<view class="cu-image">
					<image style="width: 100%; height: 100%;" mode="widthFix" src="../../static/images/logo.jpg"></image>
				</view>
				<view class="cu-title">
					<view>欢迎使用</view>
					<view>咸鱼换机品台</view>
					
				</view>
			</view>
			
			<!-- 登录框 -->
			<view class="cu-form">
				<view class="cu-input">
					<input class="cu-input-i" v-model="tel" type="text" placeholder="请输入手机号"/>
					<!-- 电话下拉选择 -->
					<picker :range="phone" range-key="name" @change="bindPicker">
					<view class="cu-phone1">
						<view class="yu">{{phone[index].name}}</view>
						<view class="xltu">
							<image mode="widthFix" src="../../static/images/jiantou@2x.png"></image>
						</view>
					
					</view>
					</picker>
				</view>
				<view class="cu-input">
					<input class="cu-input-y" v-model="code" type="number" placeholder="请输入验证码"/>
					<view class="hq" @tap="sendCode">
						<text v-show=" bl ">获取</text>
						<text v-show="!bl">{{num}}s</text>
					</view>
				</view>
			</view>
		
			<!-- 提交按钮 -->
			<view class="cu-submit">
				<view class="cu-denglu" @click="submit">
					登录
				</view>
				<view class="cu-xieyi">
					<radio class="radio" :checked="check"   @tap="radio"></radio>
					<text>请阅读并同意</text>
					<text>平台用户协议</text>
					<text>和</text>
					<text>隐私政策</text>
				</view>
			</view>
		  </view>
		</view>
		
		
	</view>
</template>

<script>
	import {sendCode,login,getUserInfo} from '../../api/index.js'
	export default {
		data() {
			return {
				check:false,
				tel:'',
				code:'',
				bl:true,
				num:10,
				index:0,
				 phone:[{
					 name:'+86'
				 },
				 {
				 	name:'+12'
				 }]
			}
		},
		methods: {
			// 获取验证码
			sendCode(){
				if(this.num!=10){
					uni.showToast({
						title: '请稍后再试',
						icon: 'none'
					})
					return
				}
				//调用验证函数
				this.yanzheng()
				sendCode(this.tel)
			},
			//登录
			async submit(){
				let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/      //正则表达式定义手机号正确格式
				if (!this.tel) {      //判断如果手机号（this.tele）为空，提示用户输入手机号
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
				        return 
				}
				if (!reg.test(this.tel)) {        //判断手机号格式时候正确
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
				if (!this.code) {     
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
				        return 
				}
				if(!this.check){
					uni.showToast({
						title: '请勾选同意协议',
						icon: 'none'
					})
					    return 
				}
				const res =  await login(this.tel,this.code)
				const res1 = await getUserInfo(this.tel)
				
				uni.setStorageSync('user',res)
				uni.setStorageSync('info',res1)
				uni.navigateBack({
					delta:1
				})
			},
			// 下拉选择
			  bindPicker(e){
				  this.index = e.detail.value
			  },
			  //单选
			  radio(){
				  this.check = !this.check
			  },
			  //验证
			  yanzheng(){
				  let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/      //正则表达式定义手机号正确格式
				  if (!this.tel) {      //判断如果手机号（this.tele）为空，提示用户输入手机号
				  	uni.showToast({
				  		title: '请输入手机号',
				  		icon: 'none'
				  	})
				          return 
				  }
				  if (!reg.test(this.tel)) {        //判断手机号格式时候正确
				  	uni.showToast({
				  		title: '请输入正确的手机号',
				  		icon: 'none'
				  	})
				  	return
				  }
				  
				  if(this.num != 0){
				  	this.bl = !this.bl
				  	uni.showToast({
				  		title: '请注意查收',
				  		icon: 'none'
				  	})
				  	const times =  setInterval(()=>{
				  		this.num--
				  		if(this.num===0){
				  			this.bl = true
				  			this.num = 10
				  			clearInterval(times)
				  		}
				  	},1000)
				  }
				  
			  }
			 
		}
	}
</script>

<style>
	
	/* 背景渐变 */
	.login-bg{
		width: 100%;
		height: 450rpx;
		background-image: linear-gradient(to bottom,#4470F4,#F6F6F6);
	}

	/* 登录框 */
	.cu-card{
		width: 686rpx;
		position: absolute;
		top:52rpx;
		left: 32rpx;
		box-sizing: border-box;
		border-radius: 16rpx;
		background-color: #fff;
		padding: 80rpx 50rpx ;
	}
	
	/* 登录主题框 */
	.cu-items{
		width: 100%;
	/* 	height: 828rpx; */
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	/* 头像框 */
	.cu-logo{
		width: 280rpx;
		height: 276rpx;
		display: flex;
		flex-direction: column;
		align-items:center;
		justify-content: space-between;
	}
	
	.cu-image{
		width: 124rpx;
		height: 124rpx;
	}
	.cu-title{
		width: 100%;
		height: 120rpx;
		color: #333;
		font-size: 40rpx;
		line-height: 60rpx;
		font-weight: 700;
		text-align: center;
	}
	
	/* 登录框 */
	.cu-form{
		width: 100%;
		height: 240rpx;
		margin-top: 64rpx;
		/* margin-bottom: 56rpx; */
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.cu-input{
		width: 100%;
		height: 104rpx;
		position: relative;
	}
	
	.cu-input-i,.cu-input-y{
		width: 100%;
		height: 100%;
		border-radius: 122rpx;
		background-color: #F6F6F6;
		color: #999;
		font-size: 32rpx;
		padding-left: 150rpx;
	}
	.cu-input-y{
		padding-left: 32rpx;
	}
	
	.cu-phone1{
		position: absolute;
		left: 32rpx;
		top: 38rpx;
		display: flex;
		justify-content: center;
	}
	.yu{
		width: 60rpx;
		height: 40rpx;
		color: #333;
		font-size: 32rpx;
		font-weight: 700;
	}
	
	.xltu{
		width: 32rpx;
		height: 32rpx;
	}
	.xltu>image{
		width: 100%;
		height: 100%;
	}
	
	.hq{
		position: absolute;
		right: 0;
		bottom: 0;
		width: 144rpx;
		height: 100%;
		background-color: #4470F4;
		border-radius: 134rpx;
		font-size: 32rpx;
		text-align: center;
		line-height: 104rpx;
		color: #fff;
		z-index: 999;
	}
	
	/* 提交按钮 */
	.cu-submit{
		width: 100%;
		height: 192rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-top: 58rpx;
		margin-bottom: 236rpx;
	}
	.cu-denglu{
		width: 100%;
		height: 104rpx;
		border-radius: 122rpx;
		background-color:#4470F4 ;
		font-size: 36rpx;
		color: #fff;
		text-align: center;
		line-height: 104rpx;
		font-weight: 700;
	}
	
	.cu-xieyi{
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999;
		font-size: 24rpx;
	}
	.radio{
		transform: scale(0.6);
	}
	.cu-xieyi>text{
		margin: 0 10rpx;
	}
</style>
